<template>
  <div class="comment_item">
    <div class="ques_user">
      <div class="photo">
        <img :src="item.userPhoto">
      </div>	
      <span>{{item.userName}}</span>
    </div>		
    <div class="asked_info">
      <p>{{item.question}}</p>
      <div class="asked_user">
        <div :class="['user_info',isShow ? 'asked_hide' : '']">
          <div class="left_info">
            <div class="photo">
              <img :src="item.masterPhoto">
            </div>
            <span>{{item.mastername}}</span>
            <em>{{item.grade}}</em>
          </div>
          <span class="watchAsked" @click="freewatch(item.consultanceid)">限时免费偷偷看</span>
        </div>
        <div :class="['free_content',isShow ? 'asked_show' : '']">
          <div class="master photo">
              <img :src="item.masterPhoto">
          </div>
          <div class="asked_content">
            <em class="close_content" @click="closeContent()"></em>
            <p>{{item.answer}}</p>
          </div>
        </div>
        
        <div class="asked_time">
          <span>{{item.answerTime}}</span>
          <span>{{item.hits}}人看过</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    export default {
        name: 'freeWatch',
        props:{
            item: Object
        },
        data(){
          return{
            isShow: false,
          }
        },
        methods: {
          freewatch(consultId){
            this.$http.fetchGet("consultancePublicRead", {
              consultanceId:consultId
            }).then(({ data }) => {
            this.isShow = !this.isShow;              
            })
          },
          closeContent(){
             this.isShow = !this.isShow; 
          }
        },
        mounted() {
            
        }
    }
</script>
<style lang="less" scoped>
.comment_item{
  padding: .533333rem .266667rem 0;
  margin-bottom: .133333rem;
  width: 100%;
  box-sizing: border-box;
  .photo{
    width: .746667rem;
    height: .746667rem;
    border-radius: .133333rem;
    overflow: hidden;
    margin-right: .266667rem;
    img{
      width: 100%;
    }
  }
  .ques_user{
    margin-bottom: .4rem;
    .flex();
    .align-items(center);
    font-size: .4rem;
    color: #333;
  }
  .asked_info{
    padding-left: .986667rem;
    p{
      color: #333;
      font-size: .32rem;
      line-height: .4rem;
    }
    .asked_user{
      margin-top: .4rem;
      position: relative;
      .user_info{
        height: 1.493333rem;
        width: 100%;
        background: #F8F8F8;
        .flex();
        .align-items(center);
        .justify-content(space-between);
        padding: .426667rem .906667rem .426667rem .133333rem;
        box-sizing: border-box;
        border-bottom: 1px solid #F2F2F2;
        transition: all .5s;
        &.asked_hide{
          overflow: hidden;
          padding: 0;
          height: 0;
          border: 0;
        }
        div.left_info{
          height: .746667rem;
          .flex();
          .align-items(center);
        }
        span{
          color: #333;
          font-size: .4rem;
        }
        em{
          display: inline-block;
          font-size: .48rem;
          color: #fff;
          background: #FEAD58;
          width: 1.28rem;
          text-align: center;
          line-height: .746667rem;
          transform-origin: 0 50% ;
          transform: scale(0.5);
          -webkit-transform-origin: 0 50%;
          -webkit-transform: scale(0.5);
          height: .746667rem;
          border-radius: .066667rem;
          margin-left: .146667rem;
          font-style: normal;
        }
        .watchAsked{
          display: block;
          border: 1px solid #189BEB;
          color: #189BEB;
          padding: .16rem .253333rem;
          border-radius: .266667rem;
          font-size: .24rem;
        }
      }
      .free_content{
        padding-left: .173333rem;
        .flex();
        overflow: hidden;
        max-height: 0;
        transition: all .5s;
        &.asked_show{
          max-height: 999px;
        }
        .master{
          padding-right: .173333rem;
        }
        .asked_content{
          position: relative;
          flex:1;
          -webkit-flex:1;
          -webkit-box-flex: 1;
          width: 7.28rem;
          border-radius: .133333rem;
          box-sizing: border-box;
          padding: .68rem .24rem;
          background:rgba(239,249,255,1);
          border:1px solid rgba(24,155,235,1);  
          .close_content{
            position: absolute;
            top: .173333rem;
            right: .173333rem;
            display: block;
            width: .266667rem;
            height: .266667rem;
            background: url("../assets/question/close.png") no-repeat center;
            background-size: contain;
          }
          p{
            color:rgba(51,51,51,1);
            line-height: 1.5;
          }
        }
      }

      .asked_time{
          height: .866667rem;
          line-height: .866667rem;
          font-size: .24rem;
          color: #999999;
          .flex();
          .justify-content(space-between);
        }
    }
  }
}
</style>
